<template>
  <div>
    <!-- 第一行开始 -->
    <div>
      {{value2}}
      <el-date-picker
        value-format="timestamp"
        v-model="value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      ></el-date-picker>
      <el-button type="primary" @click="toSearch">查询</el-button>
    </div>
    <!-- 第一行结束 -->
    <!-- 第二行开始 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="userId" label="编号" width="180"></el-table-column>
        <el-table-column prop="transferMoney" label="交易金额" width="180"></el-table-column>
        <el-table-column prop="transferTime" label="时间">
            <template slot-scope="scope">
                {{moment(scope.row.transferTime).format('YYYY-MM-DD hh:mm:ss')}}
            </template>
        </el-table-column>
        <el-table-column prop="type" label="交易类型"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
      </el-table>
    </div>
    <!-- 第二行结束 -->
  </div>
</template>
<script>
let moment =require('moment')
import { customData } from "@/api/account";
export default {
  data() {
    return {
        tableData:[],
      // 时间日期配置项
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value2: [],
      params: {
        page: 1,
        pageSize: 10
      }
    };
  },
  created() {
    this.customPro();
  },
  methods: {
      moment,
    //   给搜索按钮绑定事件
    toSearch() {
      this.customPro();
    },
    //   分页查询顾客得数据
    async customPro() {
      let temp = {
        ...this.params
      };
      if (this.value2) {
        temp.beginTime = this.value2[0];
        temp.endTime = this.value2[1];
      }
      let res = await customData(temp);
      console.log(res);
      this.tableData=res.data.list
    }
  }
};
</script>
<style lang="scss">
</style>